<template>
  <div ref="watermarkContainer" class="watermark-container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useElementSize } from '@vueuse/core';

const watermarkContainer = ref(null);
const watermarkText = '版权所有 © YourCompany';

onMounted(() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const { width, height } = useElementSize(watermarkContainer).value;

  canvas.width = width.value;
  canvas.height = height.value;

  ctx.fillStyle = 'rgba(184, 184, 184, 0.3)';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = '20px Arial';
  ctx.fillText(watermarkText, canvas.width / 2, canvas.height / 2);

  const pattern = ctx.createPattern(canvas, 'repeat');
  watermarkContainer.value.style.backgroundImage = pattern;
});
</script>

<style scoped>
.watermark-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 确保水印不会阻挡鼠标事件 */
  z-index: 1000; /* 设置一个高的 z-index 确保水印显示在其他内容之上 */
}
</style>